<style lang="scss" scoped>
$height: 190rpx;

.list-item-film {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	position: relative;
}

.list-item-film:after {
	position: absolute;
	box-sizing: border-box;
	content: ' ';
	right: 0;
	bottom: 0;
	left: 200rpx;
	border-bottom: 1px solid #E7E4E7;
}

.list-item-film-thumb {
	width: 140rpx;
	height: $height;
	border-radius: 10rpx;
	margin: 0 30rpx;
	box-shadow: 0 6rpx 30rpx 0 rgba(210, 56, 58, .2);
}

.list-item-film-pay {
	width: 130rpx;
	height: 60rpx;
	background-color: #F24244;
	box-shadow: 0 6rpx 16rpx 0 rgba(210, 56, 58, .2);
	border-radius: 30rpx;
	font-size: 32rpx;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;
}

.list-item-film-center {
	height: $height;
	min-width: 0;
	flex: 1;
	margin-right: 20rpx;
	display: block;
	position: relative;
}

.list-item-film-title {
	$height: 36rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	font-weight: bold;
	margin-top: 3rpx;
}

.list-item-film-price {
	$height: 46rpx;
	width: 100%;
	height: $height;
	line-height: $height;
	color: #FF5400;
	font-size: $height;
	font-weight: bold;
	position: absolute;
	bottom: 3rpx;
}

.list-item-film-price-unit {
	font-size: 30rpx;
}

.list-item-film-performer, .list-item-film-quantity {
	width: 100%;
	font-size: 24rpx;
	color: #999;
}

.list-item-film-performer {
	margin-top: 10rpx;
}

.list-item-film-quantity {
	margin-top: 6rpx;
}

</style>

<template>
	<view class="list-item-film">

		<!-- 缩略图 -->
		<image
			class="list-item-film-thumb"
			:src="thumb"
			mode=""
			lazy-load
		/>

		<view class="list-item-film-center">

			<!-- 名称 -->
			<view class="list-item-film-title ellipsis" v-text="name"></view>

			<!-- 主演 -->
			<view class="list-item-film-performer ellipsis" v-text="performer"></view>

			<!-- 放映统计 -->
			<view class="list-item-film-quantity ellipsis">今天<text v-text="siteQuantity" />家影厅放映<text v-text="playQuantity" />场</view>

			<!-- 价格 -->
			<view class="list-item-film-price ellipsis">
				<text class="list-item-film-price-unit" v-text="priceUnit"></text>
				<text v-text="price"></text>
			</view>
		</view>

		<!-- 购买按钮 -->
		<view class="list-item-film-pay" @click="onClickPay">购票</view>
	</view>
</template>

<script>
export default {

	props: {
		// 缩略图
		thumb: {
			type: String,
			required: true,
		},

		// 名称
		name: {
			type: String,
			required: true,
		},

		// 主演
		performer: {
			type: String,
			required: true,
		},

		// 电影厅数量
		siteQuantity: {
			type: Number,
			default: 0,
		},

		// 放映数量
		playQuantity: {
			type: Number,
			default: 0,
		},

		// 价格
		price: {
			type: Number,
			default: 0,
		},

		// 价格单位
		priceUnit: {
			type: String,
			default: "￥",
		}
	},

	methods: {

		/**
		 * 购票点击
		 */
		onClickPay() {
			this.$emit("click-pay");
		},

	}

}
</script>